<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mars3D Map Example</title>
  <style>
    /* 设置地图容器的样式 */
    #mars3dContainer {
      width: 100%;
      height: 100vh;
      background-color: rgb(255, 127, 155);
    }
  </style>
  <!--引入cesium基础lib-->
<script>
  // window.CESIUM_BASE_URL = "http://mars3d.cn/lib/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
</script>
<link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript" ></script>

<!--引入mars3d库插件lib（按需引入）-->
<script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript" ></script>
  <!-- 引入Mars3D的核心库 -->
  <!-- <script src="https://cdn.mars3d.cn/lib/mars3d/mars3d.js"></script> -->
</head>
<body>

  <!-- 定义一个用于容纳Mars3D三维地图的div容器 -->
  <div id="mars3dContainer"></div>

  <script>
    // 页面加载完成后初始化地图
    document.addEventListener('DOMContentLoaded', function () {
      initMap(); // 调用初始化地图函数
    });

    // 初始化地图的方法
    function initMap() {
      // 创建三维地图对象，并将其绑定到div容器
      const mapOptions = {
        scene: {
          center: { lat: 31.654916, lng: 117.08278, alt: 279, heading: 316, pitch: -29 } // 地图中心点配置
        }
      };

      const map = new mars3d.Map("mars3dContainer", mapOptions);

      // 固定光照，避免模型亮度随时间变化
      map.fixedLight = true;

      // 创建一个3D Tiles图层
      const tiles3dLayer = new mars3d.layer.TilesetLayer({
        type: "3dtiles", // 图层类型
        name: "石化工厂", // 图层名称
        // url: "https://data.mars3d.cn/3dtiles/max-shihua/tileset.json", // 3D Tiles资源URL
        url: "/src/assets/data/tiles/tileset.json", // 3D Tiles资源URL的本地路径（注意路径需自行调整）
        position: { lng: 117.077158, lat: 31.659116, alt: -2.0 }, // 模型的位置
        maximumScreenSpaceError: 1, // 渲染精度
        highlight: { type: "click", color: "#00ffff" }, // 设置点击后高亮颜色
        popup: "all" // 点击后显示所有属性信息
      });

      // 将3D Tiles图层添加到地图中
      map.addLayer(tiles3dLayer);

      // 绑定单击事件，当用户点击图层时触发
      tiles3dLayer.on(mars3d.EventType.click, function(event) {
        console.log("单击了3dtiles图层", event); // 控制台输出点击事件信息
      });
    }
  </script>
</body>
</html>
